<template>
  <div>
    <div ref="yuangong" id="yuangong" style="width:100%;height:480px"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
    data() {
        return {
            oriwid: ''
        }
    },
    mounted() {
        this.matchyuangong()
    },
    methods: {
        matchyuangong() {
            let myChart = echarts.init(this.$refs.yuangong);
            const option = {
                legend: {
                    textStyle: {
                        color:"#FAFAFA"
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '2016', '2017', '2018', '2019', '2020', '2021'],
                        ['养殖员工', 8, 15, 88, 103, 122, 152],
                        ['加工员工', 5, 10, 55, 53, 73, 103],
                        ['管理员', 1, 3, 15, 18, 33, 50]
                    ]
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#FAFAFA'
                        }
                    }
                },
                yAxis: {
                    gridIndex: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#FAFAFA'
                        }
                    }
                },
                grid: {top: '55%'},
                series: [
                    {
                        type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'},
                    },
                    {
                        type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'},
                    },
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        emphasis: {focus: 'data'},
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            }
            myChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
            })
            myChart.setOption(option);
        },
        screenchange() {
            this.oriwid = document.getElementById('yuangong').clientWidth
            setTimeout(() => {
                let a = (document.getElementById('yuangong').clientWidth - this.oriwid)/2 + 'px'
                document.getElementById('yuangong').style.setProperty('--wid',a)
            },1000)
        },
        resscreen() {
            document.getElementById('yuangong').style.setProperty('--wid','0px')
        }
    }
}
</script>

<style lang="scss" scoped>
#yuangong {
    $wid: var(--wid,0px);
    padding: 0 $wid;
    color: whitesmoke;
}
</style>